<template>
    <div>
        <a-layout>
            <a-layout-header>
                <my-header></my-header>
            </a-layout-header>
            <a-layout-content>
                <div class="big-container">
                    <div class="small-content-container">
                        <div class="person-blog-info">
                            <div class="person-info">
                                <a-card class="person-info-card">
                                    <div class="line-one" style="float: left">
                                        <div class="line-one-avatar" style="float: left">
                                            <a-avatar :size="48" :src="userInfo.avatarUrl"/>
                                        </div>
                                        <div class="line-one-text" style="float: left; margin-left: 10px;">
                                            <p class="text-nickname" style="margin: 0"><a
                                                    style="color: black; font-size: 15px">{{ userInfo.nickname }}</a>
                                            </p>
                                            <p class="text-old" style="margin: 0;font-size: 13px">
                                                码龄<span>{{yardAge === 0 ? 1 : yardAge}}</span>年</p>
                                        </div>
                                    </div>
                                    <div class="line-two" style="float: left;margin-top: 20px">
                                        <div class="line-two-blog-type">
                                            <p class="num">{{ typeNum }}</p>
                                            <p class="text">原创</p>
                                        </div>
                                        <div class="line-two-fans">
                                            <p class="num">{{ fansNum }}</p>
                                            <p class="text">粉丝</p>
                                        </div>
                                        <div class="line-two-like">
                                            <p class="num">{{ likeNum }}</p>
                                            <p class="text">获赞</p>
                                        </div>
                                        <div class="line-two-comment">
                                            <p class="num">9999万+</p>
                                            <p class="text">评论</p>
                                        </div>
                                        <div class="line-two-view" style="float: left;">
                                            <p class="num">{{ pageViewNum }}</p>
                                            <p class="text">访问</p>
                                        </div>
                                    </div>
                                    <div class="line-three" style="float: left;margin-top: 20px">
                                        <div class="line-three-integral">
                                            <p class="num">{{ score }}</p>
                                            <p class="text">积分</p>
                                        </div>
                                        <div class="line-three-collect">
                                            <p class="num">{{ favorites }}</p>
                                            <p class="text">收藏</p>
                                        </div>
                                        <div class="line-three-weak-rank">
                                            <p class="num">324</p>
                                            <p class="text">周排名</p>
                                        </div>
                                        <div class="line-three-total-rank">
                                            <p class="num">222w+</p>
                                            <p class="text">总排名</p>
                                        </div>
                                        <div class="line-three-level">
                                            <p class="num">
                                                <svg-icon icon="icondengji1"/>
                                                <span style="color: red; font-size: 10px;">{{ userLevel }}</span>
                                            </p>
                                            <p class="text">等级</p>
                                        </div>
                                    </div>
                                    <div class="line-four" style="float: left; margin-top: 20px">
                                        <a-button type="primary" @click="toPersonalHome" style="margin-right: 8px">
                                            他的主页
                                        </a-button>
                                        <a-button type="primary" style="margin-right: 8px" ghost>私信</a-button>
                                        <a-button v-if="isAttention" type="danger" @click="attention">关注</a-button>
                                        <a-button v-else type="dashed" @click="attention">取关</a-button>
                                    </div>
                                </a-card>
                                <a-card class="recently-blog" style="overflow: auto; margin-top: 10px">
                                    <span style="color: black; font-size: 13px; font-weight: bold"
                                          slot="title">最近发布的博客</span>
                                    <div style="margin-bottom: 15px;" v-for="(blog, index) in blogInfos" :key="index"><a
                                            style="color: black">{{ blog.title }}</a></div>
                                </a-card>
                                <a-card class="archive-blog" style="overflow: auto; margin-top: 10px">
                                    <span style="color: black; font-size: 13px; font-weight: bold"
                                          slot="title">归档</span>
                                    <div class="year-container" v-for="(archive, index) in archives" :key="index">
                                        <p class="archive-year">{{ archive.archiveYear }}</p>
                                        <div class="archive-obj"
                                             v-for="(archiveMonthObj, index) in archive.archiveMonthVOS" :key="index"
                                             style="float: left;margin-right: 10px; margin-bottom: 10px; width: 50px; height: 45px;">
                                            <div class="archive-month"><span>{{ archiveMonthObj.archiveMonth }}</span>月
                                            </div>
                                            <div class="archive-count">
                                                <span>{{ archiveMonthObj.blogNumber }}</span>篇
                                            </div>
                                        </div>
                                    </div>
                                </a-card>
                                <a-card class="view-blog" style="overflow: auto; margin-top: 10px">
                                    <span style="color: black; font-size: 13px; font-weight: bold"
                                          slot="title">访问量高的文章</span>
                                    <div style="margin-bottom: 15px;" v-for="(pageViewTopNum, index) in pageViewTopNums"
                                         :key="index">
                                        <a style="color: black">{{ pageViewTopNum.title }}</a>
                                    </div>
                                </a-card>
                            </div>
                            <div class="blog-info">

                            </div>
                        </div>
                        <div class="blog-content">
                            <p class="blog-title">{{ blogInfo.title }}</p>
                            <div class="blog-details">
                                <div class="blog-details-top">
                                    <div class="blog-details-top-top">
                                        <div style="float: left; margin-right: 25px;" class="blog-type">
                                            {{blogType.type }}
                                        </div>
                                        <div style="float: left; margin-right: 25px;" class="user-nickname">
                                            <a>{{userInfo.nickname }}</a>
                                        </div>
                                        <div style="float: left; margin-right: 25px;" class="blog-create-time">
                                            {{ blogInfo.createTime }}
                                        </div>
                                        <div style="float: left; margin-right: 35px;" class="blog-view-num">
                                            <a-icon type="eye" theme="filled"
                                                    style="color: darkgrey; margin-right: 5px;"/>
                                            {{ blogInfo.pageViewNum }}
                                        </div>
                                        <div style="float: left; margin-right: 35px;" class="blog-collection-num">
                                            <a-icon type="heart" theme="filled"
                                                    style="color: darkgrey; margin-right: 5px;"/>
                                            <span style="margin-right: 5px;">收藏</span>
                                            {{ blogInfo.likeNum }}
                                        </div>
                                        <div style="float: right; margin-right: 5px;"><a @click="changeIsCollapse"><span
                                                v-text="this.isCollapse ? '收起':'版权'"></span></a></div>
                                    </div>
                                    <div class="blog-details-top-bottom">
                                        <div class="blog-category" style="float: left">
                                            <span style="margin-right: 10px;">分类专栏：</span>
                                            <a-tag v-if="categoryColumn.id != null" color="green"
                                                   v-for="(categoryColumn, index) in categoryColumns" :key="index">
                                                {{ categoryColumn.categoryName }}
                                            </a-tag>
                                        </div>
                                        <div class="blog-tag" style="float: left">
                                            <span style="margin-right: 10px;">博客标签：</span>
                                            <a-tag v-if="blogTag.id != null"
                                                   v-for="(blogTag, index) in blogTags" :key="index"
                                                   color="purple">
                                                {{ blogTag.tagName }}
                                            </a-tag>
                                        </div>
                                    </div>
                                </div>
                                <div class="blog-details-bottom" v-if="isCollapse">
                                    <div>版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。</div>
                                    <div>本文链接：<a :href="url">{{ url }}</a></div>
                                </div>
                            </div>
                            <mark-view :content="blogInfo.content"></mark-view>
                        </div>
                        <div class="category-column">
                            <a-card>
                                <span slot="title">分类专栏</span>
                                <div class="category-container" v-for="(favoriteBlogVO, index) in userFavorites"
                                     :key="index">
                                    <div>
                                        <a-avatar shape="square" :size="30" icon="user"/>
                                        <span style="margin-left: 20px; font-size: 16px; font-weight: bold">{{ favoriteBlogVO.favorite.favoritesName }}</span>
                                    </div>
                                    <div>
                                        <span>{{ favoriteBlogVO.blogNum }}篇</span>
                                    </div>
                                </div>
                            </a-card>
                        </div>
                    </div>
                </div>
            </a-layout-content>
            <a-layout-footer>
                <div class="footer">
                    <my-footer></my-footer>
                </div>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import MyHeader from "@/views/home/components/header/index";
    import {
        findBlogInfoByBlogId,
        findRecentlyTopNumberBlogInfo,
        findRecentlyTopNumberBlogInfoByUserId,
        findTopNumberPageViewByUserId
    } from "@/api/blog/blogInfo";
    import {getUserInfo} from "@/api/user/userInfo";
    import {blogStatistics, countBlogArchive, countBlogNumberInFavorites} from "@/api/blog/blogStatistics";
    import {userAllStatistics, queryLevel} from "@/api/user/userStatistics";
    import {findFavoritesByUserId} from "@/api/blog/favorites";
    import {attention, getAttentionStatus} from "@/api/user/userFans";
    import MyFooter from "@/views/home/components/footer/index";

    export default {
        name: "view-blog",
        components: {MyFooter, MyHeader},
        data() {
            return {
                blogInfo: {},
                blogType: {},
                blogTags: [],
                categoryColumns: [],
                user: {},
                userInfo: {},
                isCollapse: false,
                yardAge: 1,
                url: '',
                countType: 0,
                countPageViewNum: 0,
                countLikeNum: 0,
                countFavorites: 0,
                countFans: 0,
                integral: 0,
                userLevel: 0,
                blogInfos: [],
                archives: [],
                pageViewTopNums: [],
                userFavorites: [],
                isAttention: 1
            }
        },
        created() {
            this.init()
        },
        computed: {
            typeNum() {
                return parseInt(this.countType / 10000) ? parseInt(this.countType / 10000) + '万+' : this.countType;
            },
            fansNum() {
                return parseInt(this.countFans / 10000) ? parseInt(this.countFans / 10000) + '万+' : this.countFans;
            },
            likeNum() {
                return parseInt(this.countLikeNum / 10000) ? parseInt(this.countLikeNum / 10000) + '万+' : this.countLikeNum;
            },
            pageViewNum() {
                return parseInt(this.countPageViewNum / 10000) ? parseInt(this.countPageViewNum / 10000) + '万+' : this.countPageViewNum;
            },
            score() {
                return parseInt(this.integral / 10000) ? parseInt(this.integral / 10000) + '万+' : this.integral;
            },
            favorites() {
                return parseInt(this.countFavorites / 10000) ? this.countFavorites / 10000 + '万+' : this.countFavorites;
            }
        },
        methods: {
            /* 初始化方法，加载基本信息 */
            async init() {
                const blogId = this.$route.query.id
                const data = await findBlogInfoByBlogId(blogId)
                this.blogInfo = data
                this.blogType = data.blogType
                this.blogTags = data.blogTags
                this.categoryColumns = data.categoryColumns
                const userId = this.blogInfo.tuserId
                const userDetail = await getUserInfo(userId)
                this.user = userDetail
                this.userInfo = userDetail.userInfo
                const currentUrl = window.location.href;
                this.url = currentUrl
                this.getYardAge();
                await this.getAllStatistics();
                await this.getUserLevel();
                await this.findRecentlyTopNumberBlogInfoByUserId();
                await this.countBlogArchive();
                await this.findTopNumberPageViewByUserId();
                await this.findFavoritesByUserId();
                await this.getAttentionStatus();
            },
            /* 收起版权 */
            changeIsCollapse() {
                this.isCollapse = !this.isCollapse
            },
            /* 个人中心 */
            toPersonalHome() {

            },

            async getAttentionStatus() {
                const vuexUserId = this.$store.state.user.id
                if (vuexUserId === null) {
                    this.isAttention = 1
                } else {
                    const data = await getAttentionStatus(this.blogInfo.tuserId, vuexUserId)
                    this.isAttention = data
                }
            },
            /* 关注 */
            async attention() {
                const vuexUserId = this.$store.state.user.id
                if (vuexUserId === null) {
                    this.$message.info({
                        content: '请先登录，在进行关注操作！！',
                        duration: 3
                    })
                } else {
                    const data = await attention(this.blogInfo.tuserId, vuexUserId)
                    if (data) {
                        this.isAttention = 1
                    } else {
                        this.isAttention = 0
                    }
                }
            },
            /* 获取码龄 */
            getYardAge() {
                const d = this.blogInfo.createTime;
                const d3 = d.toString().substr(0, 4);
                const blogCreateTimeYear = parseInt(d3)
                const d2 = new Date().getFullYear();
                const currentTimeYear = parseInt(d2.toString())
                const ya = currentTimeYear - blogCreateTimeYear;
                this.yardAge = ya;
            },
            /* 获取原创数之类的统计信息 */
            async getAllStatistics() {
                const userStatistics = await userAllStatistics(this.user.id)
                this.countFans = userStatistics.countFans
                this.integral = userStatistics.score
                const blogTotal = await blogStatistics(this.user.id)
                this.countType = blogTotal.countType
                this.countPageViewNum = blogTotal.countPageViewNum
                this.countLikeNum = blogTotal.countLikeNum
                this.countFavorites = blogTotal.countFavorites
            },
            /* 获取用户的等级 */
            async getUserLevel() {
                const level = await queryLevel(this.user.id)
                this.userLevel = level
            },

            /* 获取最近发布的五篇文章 */
            async findRecentlyTopNumberBlogInfoByUserId() {
                const data = await findRecentlyTopNumberBlogInfoByUserId(5, this.user.id)
                this.blogInfos = data
            },
            /* 博客归档 */
            async countBlogArchive() {
                const data = await countBlogArchive(this.user.id)
                this.archives = data
            },
            /* 查询访问量高的前几篇文章 */
            async findTopNumberPageViewByUserId() {
                const data = await findTopNumberPageViewByUserId(5, this.user.id)
                this.pageViewTopNums = data
            },
            /* 列出所有收藏夹 */
            async findFavoritesByUserId() {
                const data = await findFavoritesByUserId(this.user.id)
                this.userFavorites = data
            },
            viewRecentlyBlog(id) {
                this.$router.push({
                    name: 'viewBlog',
                    query: id
                })
            }
        }
    }
</script>

<style scoped>
    .big-container {
        background: #333333;
        overflow: hidden;
    }

    .category-container {
        padding: 0 0 5px 0;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px rgba(241, 243, 245, 1) solid;
        border-top: 1px rgba(241, 243, 245, 1) solid;
        display: flex;
        margin-bottom: 5px;
        justify-content: space-between;
    }

    .archive-month {
        margin: 0 0 2px 0;
        border-radius: 5px 5px 0 0;
        text-align: center;
        background: rgb(241, 243, 245)
    }

    .archive-count {
        margin: 0;
        text-align: center;
        border-radius: 0 0 5px 5px;
        background: rgb(246, 248, 250)
    }

    .line-two-blog-type, .line-two-fans, .line-two-like, .line-two-comment, .line-three-integral {
        text-align: center;
        font-size: 13px;
        width: 50px;
        float: left;
    }

    .line-three-collect, .line-three-weak-rank, .line-three-total-rank, .line-three-level, .line-two-view {
        width: 50px;
        font-size: 13px;
        text-align: center;
        float: left;
    }

    .line-two, .line-three {
        border-bottom: 1px rgba(245, 245, 252, 1) solid;
        padding-bottom: 5px;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: #fff;
    }

    .num {
        margin: 0;
    }

    .text {
        margin: 0;
        color: darkgray;
    }

    .blog-details-top-bottom {
        margin-left: 55px;
        margin-top: 5px;
    }

    .blog-details-top-top {
        height: 30px;
        line-height: 30px;
    }

    .blog-type {
        background: rgb(239, 173, 171);
        width: 40px;
        height: 30px;
        transform: perspective(2em) rotateY(10deg);
        text-align: center;
        color: white;
        border-radius: 4px;
        font-size: 13px;
        margin-left: 5px;
        line-height: 30px;
    }

    .small-content-container {
        margin-left: 145px;
        margin-top: 74px;
        width: 1650px;
    }

    .person-blog-info {
        width: 300px;
        float: left;
        margin-right: 10px;
    }

    .blog-content {
        background: white;
        width: 1020px;
        float: left;
        padding: 15px 20px;
    }

    .category-column {
        background: white;
        width: 300px;
        margin-left: 10px;
        float: left;
    }

    .person-info-card, .recently-blog, .archive-blog, .view-blog {
        width: 300px;
        height: 300px;
    }

    .blog-title {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .blog-details {
        width: 980px;
    }

    .blog-details-top {
        width: 980px;
        height: 60px;
        margin-bottom: 10px;
        background: rgb(247, 247, 252);
    }

    .blog-details-bottom {
        height: 60px;
        margin-bottom: 10px;
        border-bottom: solid rgba(247, 247, 252, .4);
    }

</style>